<template>   
    <div>
         <!-- 导航部分开始 -->  
         <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>主数据</el-breadcrumb-item>
            <el-breadcrumb-item>车间设置</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 导航部分结束 -->
                <!--  搜索栏开始 -->
                <el-form style="margin-top: 15px;" :inline="true" :model="queryItem" class="demo-form-inline">
                    <el-form-item label="车间编码">
                        <el-input v-model="queryItem.workshopCodeCode" placeholder="请输入车间编码" clearable />
                    </el-form-item>
                    <el-form-item label="车间名称">
                        <el-input v-model="queryItem.workshopName" placeholder="请输入车间名称" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="loadItems">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="reLoad">重置</el-button>
                    </el-form-item>
                </el-form>
                <!--  搜索栏结束 -->
                <!-- 工具栏开始 -->
                <div class="flex">
                    <el-button title="新增车间" @click="this.addItemDialogVisible = true" type="primary"><el-icon>
                            <Plus />
                        </el-icon></el-button>
                    <el-button @click="handlerEditItems" title="编辑选中车间" type="primary"><el-icon>
                            <EditPen />
                        </el-icon></el-button>
                    <el-button @click="handlerDeleteItems" title="删除选中车间" type="primary"><el-icon>
                            <Delete />
                        </el-icon></el-button>
                </div>
                <!-- 工具栏结束 -->
                <!-- 表格 开始 -->
                <el-table ref="itemTable" :data="items" max-height="600px" stripe="true" border="true"
                    style="width: 100%;margin-top: 10px;">
                    <el-table-column align="center" type="selection" width="55" />               
                    <el-table-column align="center" label="车间编码" property="workshopCode">
                        <template #default="scope">
                            <el-link type="success" @click="showItemData(scope.row)">
                                {{ scope.row.workshopCode }}
                            </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="车间名称" property="workshopName" />
                    <el-table-column align="center" label="面积" property="area" />
                    <el-table-column align="center" label="负责人" property="charger" />
                    <el-table-column align="center" label="是否启用" property="enableFlag">
                        <template #default="scope">
                            <!-- scope.row 就是整行数据-->
                            <el-tag v-if="scope.row.enableFlag == 'Y'" class="ml-2" type="success">是</el-tag>
                            <el-tag v-else class="ml-2" type="danger">否</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="备注" property="remark"></el-table-column>
                    <el-table-column width="200" align="center" label="操作">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
                            <el-popconfirm confirm-button-text="是" cancel-button-text="点错了"
                                @confirm="handleDelete(scope.row)" title="您是否要删除这行数据">
                                <template #reference>
                                    <el-button size="small" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 表格 结束 -->
                <!-- 分页栏开始 -->
                <el-pagination style="margin-top: 15px;" :page-size="itemLimit" :pager-count="itemMaxPage"
                    @current-change="changePage" background layout="prev, pager, next" :total="itemTotal" />
                <!-- 分页栏结束 -->


                <!-- 添加车间的弹窗窗体开始-->
                <el-dialog v-model="addItemDialogVisible" title="添加车间" width="600" align-center>
                    <!-- 添加用户的表单 -->
                    <el-form label-width="100px" :model="newItem" style="max-width: 460px">
                        <el-form-item label="车间编码" style="width: 300px;">
                            <el-input v-model="newItem.workshopCode"  placeholder="请输入车间编码"/>
                            <el-switch @change="autoGenWorkOrderId" v-model="autoWorkOrderId" class="ml-2" style="--el-switch-on-color: #13ce66; 
                            --el-switch-off-color: #ff4949" />自动生成
                        </el-form-item>
                        <el-form-item label="车间名称">
                            <el-input v-model="newItem.workshopName" placeholder="请输入车间名称"/>
                        </el-form-item>
                        <el-form-item label="面积">
                            <el-input-number v-model="newItem.area" :min="1" :max="10000"  />
                        </el-form-item>
                        <el-form-item label="负责人">
                            <el-input v-model="newItem.charger" placeholder="请输入负责人"/>
                        </el-form-item>
                        <el-form-item label="是否启用">
                            <el-radio-group v-model="newItem.enableFlag" class="ml-4">
                                <el-radio label="N" size="large">否</el-radio>
                                <el-radio label="Y" size="large">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" :rows="3" v-model="newItem.remark" placeholder="请输入内容" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="cancelAddItem">取消</el-button>
                            <el-button type="primary" @click="doAddItem">
                                提交
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
                <!-- 添加车间的弹窗窗体结束-->


                <!-- 查看车间的弹窗开始-->
                <el-dialog v-model="itemCodeDataAttr.itemCodeManagerDialogVisible" title="查看车间" width="30%" align-center>
                    <!-- 添加用户的表单 -->
                    <el-form label-width="100px" :model="newItem" style="max-width: 460px">
                        <el-form-item  label="车间编码" style="width: 300px;">
                            <el-input readonly="true" v-model="newItem.workshopCode"  />            
                        </el-form-item>
                        <el-form-item label="车间名称">
                            <el-input readonly="true" v-model="newItem.workshopName" />
                        </el-form-item>
                        <el-form-item label="面积">
                            <el-input-number readonly="true" v-model="newItem.area" :min="1" :max="10000"  />
                        </el-form-item>
                        <el-form-item label="负责人">
                            <el-input readonly="true" v-model="newItem.workshopName" />
                        </el-form-item>
                        <el-form-item label="是否启用">
                            <el-radio-group  v-model="newItem.enableFlag" class="ml-4">
                                <el-radio label="N" size="large" disabled="true">否</el-radio>
                                <el-radio label="Y" size="large" disabled="true">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input readonly="true" type="textarea" :rows="3" v-model="newItem.remark" />
                        </el-form-item>
                    </el-form>
                </el-dialog>
                <!-- 查看车间的弹窗结束-->

                <!-- 修改车间的弹窗窗体开始-->
                <el-dialog v-model="itemEditDrawer" title="修改车间" width="600" align-center>
                    <!-- 添加用户的表单 -->
                    <el-form label-width="100px" :model="editItem" style="max-width: 460px">
                        <el-form-item label="车间编码" style="width: 300px;">
                            <el-input v-model="editItem.workshopCode"  placeholder="请输入车间编码"/>
                            <el-switch @change="autoGenWorkOrderId" v-model="autoWorkOrderId" class="ml-2" style="--el-switch-on-color: #13ce66; 
                            --el-switch-off-color: #ff4949" />自动生成
                        </el-form-item>
                        <el-form-item label="车间名称">
                            <el-input v-model="editItem.workshopName" placeholder="请输入车间名称"/>
                        </el-form-item>
                        <el-form-item label="面积">
                            <el-input-number v-model="editItem.area" :min="1" :max="10000"  />
                        </el-form-item>
                        <el-form-item label="负责人">
                            <el-input v-model="editItem.charger" placeholder="请输入负责人"/>
                        </el-form-item>
                        <el-form-item label="是否启用">
                            <el-radio-group v-model="editItem.enableFlag" class="ml-4">
                                <el-radio label="N" size="large">否</el-radio>
                                <el-radio label="Y" size="large">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" :rows="3" v-model="editItem.remark" placeholder="请输入内容" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="cancelEdit">取消</el-button>
                            <el-button type="primary" @click="doDictEdit">
                                提交
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
                <!-- 修改车间的弹窗窗体结束-->
    </div>
</template>
<script>
import workshopRequest from '../../../api/mdWorkShop-api.js';
export default {
    data() {
        return {
            queryItem: {}, // 分装查询字典条件的字典对象
            items: [],// 字典数据列表
            itemCurrPage: 1, // 字典分页的当前页码
            itemLimit: 10, // 字典分页的每页大小
            itemTotal: 0, // 字典列表的总条数
            itemMaxPage: 1,// 字典列表的最大页码

            // 新增物料相关属性
            addItemDialogVisible: false,// 新增字典的弹窗标志
            newItem: {},// 封装新增的字典信息
            currItem: {},// 保存正在操作的字典信息
            prodWorkOrder: true,
            autoWorkOrderId: false,           
            measures: [],

            //编辑物料相关属性
            itemEditDrawer: false,
            editItem: {},

            // 物料编码数据管理相关属性
            itemCodeDataAttr: {
                itemCodeManagerDialogVisible: false,//物料编码数据管理的弹窗标志 
                additemCodeDataDialogVisible: false,// 新增物料编码数据的弹窗标志
                itemDatas: [],// 字典数据列表
                newData: {},// 封装新增字典数据对象
            }
        }
    },
    methods: {
         /**
         * 确定编辑车间
         */
         doDictEdit() {
            // console.log("开始编辑")
            // 提交editUser即可
            workshopRequest.edit(this.editItem, res => {
                console.log("*******")
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '修改车间成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.itemEditDrawer = false;
                    // 重新加载数据
                    this.loadItems();
                    // 将editUser制空
                    this.editItem = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '车间重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
         * 取消车间编辑
         */
        cancelEdit() {
            // 将编辑的用户制空
            this.editItem = {};
            // 关闭抽屉弹窗
            this.itemEditDrawer = false;
        },
        /**
         * 重置物料表单
         */
        reLoad(){
            this.queryItem = {};
            this.loadItems();
        },
        /**
         * 自动生成物料编码的方法
         * @param {*} val 
         */
        autoGenWorkOrderId(val) {
            if (val) {
                workshopRequest.genWorkOrderId(res => {
                    this.newItem.workshopCode = res.data;
                });
            }
        },
        /**
         * 点击字典类型的事件，显示字典数据管理窗体
         * @param {*} row 
         */
        showItemData(row) {
            this.itemCodeDataAttr.itemCodeManagerDialogVisible = true;
            this.newItem = row;
        },
        
        /**
         * 新增字典的提交按钮事件
         */
        doAddItem() {
            // 数据校验：略
            // 提交数据
            workshopRequest.save(this.newItem, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "保存成功"
                    });
                    // 关闭窗体
                    this.cancelAddItem();
                    // 重新加载数据
                    this.loadItems();// 加载当前页
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "保存失败"
                    });
                }
            });
        },
        /**
         * 取消新增字典的按钮事件
         */
        cancelAddItem() {
            // 关闭窗体
            this.addItemDialogVisible = false;
            // 清空newDict
            this.newItem = {};
        },
        /**
         * 行删除事件
         * @param {} row 
         */
        handleDelete(row) {
            workshopRequest.delete(row.workshopId,res=>{
                if(res.code == 200){
                    this.$message({
                        type:'success',
                        message:'删除成功'
                    });
                    this.loadItems();
                }else{
                    this.$message({
                        type:'error',
                        message:'删除失败'
                    })
                }
            });  
        },
        /**
         * 行编辑事件
         * @param {*} row 
         */
        handleEdit(row) {

            workshopRequest.selectById(row.workshopId, res => {
                this.itemEditDrawer = true;
                this.editItem = res.data;
            })
        },
        /**
         * 工具栏-选中删除按钮事件
         */
        handlerDeleteItems() {
            let table = this.$refs.itemTable;
            let selectionRows = table.getSelectionRows();
            if(selectionRows == undefined || selectionRows.length == 0){
                this.$message({
                    message:"您没有选中任何行",
                    type:"info"
                });
            }
            else{
            let itemIds = [];
            selectionRows.forEach(item => {
                itemIds.push(item.workshopId);
            });
            workshopRequest.deletes(itemIds,res=>{
                this.$message({
                    type:"success",
                    message:"您成功删除了" + res.msg + "个车间"
                });
                this.loadItems();
            });
        }
        },
        /**
         * 工具栏-选中编辑按钮事件
         */
        handlerEditItems() {

        },
        /**
         * 字典列表的翻页函数
         * @param {} value  最新页码
         */
        changePage(value) {
            this.itemCurrPage = value;
            this.loadItems();
        },
        /**
         * 加载字典数据
         */
        loadItems() {
            workshopRequest.list(this.itemCurrPage, this.itemLimit, this.queryItem, res => {
                // 设置数据
                this.items = res.data.list;
                this.itemTotal = res.data.total;
                this.itemMaxPage = res.data.pages;
            });
        }
    },
    mounted() {
        // 默认加载字典数据列表
        this.loadItems();
    }
}
</script>